<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/font-awesome.min.css">

    <title>Xow</title>

    <style>
        html {
            height: 100%;
        }
        
        body {
            height: 100%;
        }
        
        #app {
            padding: 20px
        }
    </style>
</head>

<body>
    <div id="app">
        <div style="margin-top:0px">

            <div class="btn-group" role="group" style="display: block;">
                <button type="button" class="btn btn-light" @click="showState=1;this.getPublishItem()">我发布的商品</button>
                <button type="button" class="btn btn-light" @click="showState=2;this.getStarItem()">我收藏的商品</button>
            </div>

            <div v-if="showState==1">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th scope="col">商品名称</th>
                            <th scope="col">商品价格</th>
                            <th scope="col">商品描述</th>
                            <th scope="col">商品标签</th>
                            <th scope="col">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in publishItem" :key="index">
                            <td>
                                <div style="width:200px">
                                    {{item.item_name}}
                                </div>
                            </td>
                            <td>
                                <div style="width:150px">
                                    {{item.item_price}}
                                </div>
                            </td>
                            <td>
                                <p style="width: 350px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" :title="item.item_desc">{{item.item_desc}}</p>
                            </td>
                            <td>
                                <div style="width:100px">
                                    {{item.item_label}}
                                </div>
                            </td>
                            <td>
                                <div style="width:100px">
                                    <a href="#" @click="changeItem(item,index)" style="margin-right: 10px;">修改</a>
                                    <a href="#" @click="deleteItem(item)">删除</a>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <button type="button" class="btn btn-primary" @click="addItem" style="margin: 0px auto;display: block;">添加商品</button>

            </div>
            <div v-else>
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th scope="col">商品名称</th>
                            <th scope="col">商品价格</th>
                            <th scope="col">商品描述</th>
                            <th scope="col">商品标签</th>
                            <th scope="col">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in starItem" :key="index">
                            <td>
                                <div style="width:200px">
                                    {{item.item_name}}
                                </div>
                            </td>
                            <td>
                                <div style="width:150px">
                                    {{item.item_price}}
                                </div>
                            </td>
                            <td>
                                <p style="width: 350px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" :title="item.item_desc">{{item.item_desc}}</p>
                            </td>
                            <td>
                                <div style="width:100px">
                                    {{item.item_label}}
                                </div>
                            </td>
                            <td>
                                <div style="width:100px">
                                    <a href="#" @click="cancelStar(item)">取消收藏</a>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

        </div>

        <!-- 添加商品界面 -->
        <div id="addItem" style="display: none;padding: 0px;">
            <div style="display: flex;flex-direction: row;justify-content: center;">
                <form style="width: 450px;padding:10px 30px">
                    <div class="form-group">
                        <label for="Input1">商品名称</label>
                        <input v-model="addForm.item_name" class="form-control" id="Input1" placeholder="请输入商品名称">
                    </div>
                    <div class="form-group">
                        <label for="Input2">商品价格</label>
                        <input v-model="addForm.item_price" type="number" class="form-control" id="Input2" placeholder="请输入商品价格">
                    </div>
                    <div class="form-group">
                        <label for="Input3">商品描述</label>
                        <textarea v-model="addForm.item_desc" class="form-control" id="Input3" rows="3" placeholder="请输入商品描述"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="Input4">商品图片: </label>
                        <input style="display:block;" type="file" ref="fileInput" @change="handleFile" v-if="!currentFile" />
                        <div v-else>
                            <div style="width:300px;height:300px;display:flex;flex-direction: column;align-items: center;justify-content: center;">
                                <img :src="currentImgUrl" style="max-width:100%;max-height: 100%;" />
                            </div>
                            <div style="height:20px;float: right;">
                                <a href="#" @click="uploadAvatar" style="margin-right: 20px;">提交图片</a>
                                <a href="#" @click="currentFile=null;currentImgUrl=null;">重新选择</a>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="select1">商品标签</label>
                        <select v-model="addForm.item_label" class="form-control" id="select1" placeholder="请选择商品标签">
                            <option>书籍</option>
                            <option>衣物</option>
                            <option>日常用品</option>
                            <option>电子产品</option>
                            <option>体育用品</option>
                            <option>食品饮料</option>
                            <option>美妆护肤</option>
                            <option>其他</option>
                        </select>
                    </div>
                    <button type="button" class="btn btn-primary " @click="submitAdd" style="width:100%">提交</button>
                </form>
            </div>
        </div>


        <!-- 修改商品界面 -->
        <div id="changeItem" style="display: none;padding: 15px;">
            <div style="display: flex;flex-direction: row;justify-content: center;">
                <form style="width: 450px;padding:10px 30px">
                    <div class="form-group">
                        <label for="Input1">商品名称</label>
                        <input v-model="changeForm.item_name" class="form-control" placeholder="请输入商品名称">
                    </div>
                    <div class="form-group">
                        <label for="Input2">商品价格</label>
                        <input v-model="changeForm.item_price" type="number" class="form-control" placeholder="请输入商品价格">
                    </div>
                    <div class="form-group">
                        <label for="Input3">商品描述</label>
                        <textarea v-model="changeForm.item_desc" class="form-control" rows="3" placeholder="请输入商品描述"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="Input4">商品图片: </label>
                        <div v-if="!changeForm.item_image">
                            <input style="display:block;" v-if="!currentFile" type="file" ref="fileInput" @change="handleFile" />
                            <div v-else>
                                <div style="width:300px;height:300px;display:flex;flex-direction: column;align-items: center;justify-content: center;">
                                    <img :src="currentImgUrl" style="max-width:100%;max-height: 100%;" />
                                </div>
                                <div style="height:20px;float: right;">
                                    <a href="#" @click="uploadAvatar" style="margin-right: 20px;">提交图片</a>
                                    <a href="#" @click="currentFile=null;currentImgUrl=null;">重新选择</a>
                                </div>
                            </div>
                        </div>
                        <div v-else>
                            <div style="width:300px;height:300px;display:flex;flex-direction: column;align-items: center;justify-content: center;">
                                <img :src="imgUrl()" style="max-width:100%;max-height: 100%;" />
                            </div>
                            <div style="height:20px;float: right;">
                                <a href="#" @click="changeForm.item_image=null">重新选择</a>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="select1">商品标签</label>
                        <select v-model="changeForm.item_label" class="form-control" placeholder="请选择商品标签">
                            <option>书籍</option>
                            <option>衣物</option>
                            <option>日常用品</option>
                            <option>电子产品</option>
                            <option>体育用品</option>
                            <option>食品饮料</option>
                            <option>美妆护肤</option>
                            <option>其他</option>
                        </select>
                    </div>
                    <button type="button" class="btn btn-primary " @click="submitChange" style="width:100%">提交</button>
                </form>
            </div>

        </div>

        <!-- 删除商品界面 -->
        <div id="delItem" style="display: none;padding: 15px;">
            <div style="position: relative;width:100%;height:110px">
                <div style="display: flex;flex-direction: row;justify-content: center;">
                    删除商品后不可恢复,确定删除?
                </div>
                <div style="position: absolute;right:20px;bottom:0px">
                    <button type="button" class="btn btn-light" style="margin-right:20px" @click="cancelDel">取消</button>
                    <button type="button" class="btn btn-primary" @click="submitDel">确定</button>
                </div>

            </div>
        </div>

        <!-- 取消收藏界面 -->
        <div id="cancelStar" style="display: none;padding: 15px;">
            <div style="position: relative;width:100%;height:110px">
                <div style="display: flex;flex-direction: row;justify-content: center;">
                    取消收藏后不可恢复,确定取消?
                </div>
                <div style="position: absolute;right:20px;bottom:0px">
                    <button type="button" class="btn btn-light" style="margin-right:20px" @click="cancelDel">取消</button>
                    <button type="button" class="btn btn-primary" @click="submitCancelStar">确定</button>
                </div>

            </div>
        </div>


    </div>



    <!-- 选项 1：jQuery 和 Bootstrap 集成包（集成了 Popper） -->
    <script src="../js/jquery-3.6.0.slim.min.js"></script>
    <script src="../js/bootstrap.bundle.min.js"></script>
    <script src="../js/vue.global.js"></script>
    <!-- <script src="https://unpkg.com/vue"></script> -->
    <script src="../js/axios.min.js"></script>
    <script src="../js/my-axios.js"></script>
    <script src="../layer/layer.js"></script>

    <script>
        const app = {
            data() {
                return {
                    openIdx: null, //打开的窗口
                    showState: 1, //1展示发布的商品,2展示收藏的商品
                    publishItem: [], //发布商品的信息
                    starItem: [], //收藏商品的信息
                    changeForm: {}, //修改的数据
                    addForm: {}, //添加的数据
                    loadIdx: null,
                    delItem: {}, //删除的数据
                    cancelStarItem: {}, //取消收藏的商品
                    currentFile: null,
                    currentImgUrl: null,
                    retFileName: null,
                }
            },
            methods: {
                //打开添加窗口
                addItem() {
                    this.openIdx = layer.open({
                        type: 1,
                        title: '新增商品信息',
                        area: ['800px', '600px'],
                        content: $('#addItem'),
                    })
                },
                submitAdd() {
                    this.loadIdx = layer.load()
                    this.addForm.u_id = sessionStorage.getItem("u_id")
                    this.addForm.item_image = this.retFileName
                    myAxios.post("/item/addItem", this.addForm).then(res => {
                        layer.close(this.loadIdx)
                        console.log(res);
                        if (res.data.success) {
                            layer.msg("添加成功", {
                                icon: 1,
                                time: 500
                            })
                            this.getPublishItem()
                        } else {
                            layer.msg(res.data.message, {
                                icon: 2,
                                time: 1000
                            })
                        }
                        layer.close(this.openIdx)
                        this.addForm = {}
                    })
                },
                //打开修改窗口
                changeItem(item, index) {
                    this.changeForm = item
                    const that = this
                    this.openIdx = layer.open({
                        type: 1,
                        title: '修改商品信息',
                        area: ['800px', '600px'],
                        content: $('#changeItem'),
                        end: function() {
                            // 右上角关闭事件的逻辑
                            that.currentFile = null
                            that.currentImgUrl = null
                            console.log(1);
                        }
                    })
                },
                imgUrl() {
                    return "http://localhost:8080/xjw_war_exploded/item/avatar?filename=" + this.changeForm.item_image
                },
                // 提交修改
                submitChange() {
                    this.loadIdx = layer.load()
                    this.changeForm.item_image = this.retFileName
                    myAxios.post("/item/changeItemInfo", this.changeForm).then(res => {
                        layer.close(this.loadIdx)
                        console.log(res);
                        if (res.data.success) {
                            layer.msg("修改成功", {
                                icon: 1,
                                time: 500
                            })
                            this.getPublishItem()

                        } else {
                            layer.msg(res.data.message, {
                                icon: 2,
                                time: 1000
                            })
                        }

                        layer.close(this.openIdx)
                        this.changeForm = {}
                    })
                },
                //删除数据
                deleteItem(item) {
                    this.delItem = item
                    this.openIdx = layer.open({
                        type: 1,
                        title: '删除商品信息',
                        area: ['300px', '200px'],
                        content: $('#delItem'),
                    })
                },
                cancelDel() {
                    layer.close(this.openIdx)
                },
                submitDel() {
                    layer.close(this.openIdx)
                    this.loadIdx = layer.load()
                    myAxios.post("/item/delItem", this.delItem).then(res => {
                        layer.close(this.loadIdx)
                        console.log(res);
                        if (res.data.success) {
                            layer.msg("删除成功", {
                                    icon: 1,
                                    time: 500
                                })
                                //重新请求数据
                            this.getPublishItem()
                        } else {
                            layer.msg(res.data.message, {
                                icon: 2,
                                time: 1000
                            })
                        }
                    })
                },
                //取消收藏
                cancelStar(item) {
                    this.cancelStarItem = item
                    this.openIdx = layer.open({
                        type: 1,
                        title: '取消收藏',
                        area: ['300px', '200px'],
                        content: $('#cancelStar'),
                    })
                },
                submitCancelStar() {
                    layer.close(this.openIdx)
                    this.loadIdx = layer.load()
                    myAxios.post("star/changeStar", {
                        item_id: this.cancelStarItem.item_id,
                        u_id: sessionStorage.getItem("u_id"),
                        star: 0
                    }).then(res => {
                        layer.close(this.loadIdx)
                        console.log(res);
                        if (res.data.success) {
                            layer.msg("取消收藏成功", {
                                    icon: 1,
                                    time: 500
                                })
                                //重新请求数据
                            this.getStarItem()
                        } else {
                            layer.msg(res.data.message, {
                                icon: 2,
                                time: 1000
                            })
                        }
                    })
                },
                //选择头像
                chooseAvatar() {
                    this.$refs.fileInput.click(); //通过程序点击文件框
                },
                //选择图片文件后处理图片文件
                handleFile() {
                    this.currentFile = this.$refs.fileInput.files[0]; //获得选中的图片文件

                    let fileReader = new FileReader();
                    fileReader.onload = () => { //读取文件完成事件
                        this.currentImgUrl = fileReader.result; //将加载结果（将文件转变为可访问的url）赋值与currentImgUrl
                    };
                    fileReader.readAsDataURL(this.currentFile); //读取文件并转化为url
                },
                //上传头像
                uploadAvatar() {
                    let idx = layer.load();
                    let formData = new FormData();
                    formData.append("avatar", this.currentFile); //"avatar"是参数名

                    console.log(formData);
                    console.log(this.currentImgUrl);
                    myAxios.post("/item/avatar", formData).then(res => {
                        layer.close(idx);
                        if (res.data.success) {
                            layer.msg('上传成功！', {
                                icon: 1
                            });
                            this.retFileName = res.data.data
                            console.log(this.retFileName);
                        } else {
                            layer.msg(res.data.message, {
                                icon: 2
                            });
                        }
                    }).catch(err => {
                        layer.close(idx);
                    })
                },


                getPublishItem() {
                    myAxios.post("star/getAllPublishItem", {
                        u_id: sessionStorage.getItem("u_id")
                    }).then(res => {
                        this.publishItem = res.data.data
                    })
                },
                getStarItem() {
                    myAxios.post("star/getAllStarItem", {
                        u_id: sessionStorage.getItem("u_id")
                    }).then(res => {
                        console.log(res);
                        this.starItem = res.data.data
                    })
                }
            },
            created() {
                this.getPublishItem()
            }

        }
        Vue.createApp(app).mount('#app')
    </script>
</body>

</html>